<template>
    <div class="office">
        <el-row class="rljxViewBox">
          <el-col :xl="8" :sm="8" :lg="8" :md="8">
              <chart-lay-out>
                  <span slot="title">KPI管理指标趋势(人)</span>
                  <div slot="identi" style="text-align:left">
                    <p style="margin-left: 54px">滑动右边视图的标尺来切换月份</p>
                  </div>
                  <div slot="main">
                    <pie-chart v-model="stockAnalysisArr" @chartHoverData="changePieChart" :option="stockAnalysisOption"></pie-chart>
                  </div>
              </chart-lay-out>
          </el-col>
          <el-col :xl="16" :sm="16" :lg="16" :md="16">
              <chart-lay-out :showLine="false" :showTitle="false">
                  <!-- <span slot="title">工程进度(三期)</span> -->
                  <div slot="main" style="margin-right: 20px">
                    <line-chartss style="margin-top: 50px" v-model="managementIndexArr" :option="managementOption" @chartHoverData="changeManageMentChart"></line-chartss>
                  </div>
              </chart-lay-out>
          </el-col>
        </el-row>
        <el-row class="rljxBottomBox">
          <el-col :xl="24" :sm="24" :lg="24" :md="24">
              <chart-lay-out :showLine="false">
                <span slot="title">个人绩效排名(分值)</span>
                <div slot="main" class="headBox" style="margin-left:32px;margin-top:40px;">
                  <el-tabs v-model="departmentID" type="border-card" @tab-click="handleClick">
                    <el-tab-pane class="inlayerTabHead" v-for="(item,index) in departmentList" :key="index"  :label="item.name" :name="String(index)">
                      <el-tabs v-model="staffID" type="border-card" @tab-click="changeChart">
                        <el-tab-pane v-for="(employee,employeeIndex) in personnelList" :key="employeeIndex"  :label="employee.name" :name="String(employeeIndex)">
                          <line-chart style="margin-top: 50px" v-model="performanceTrends" :option="myLinesOption"></line-chart>
                        </el-tab-pane>
                      </el-tabs>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </chart-lay-out>
          </el-col>
        </el-row>
    </div>
</template>
<script>
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import lineChartss from "@/components/Charts/lineChartss";
import lineChart from "@/components/Charts/lineChart";
import bgLayOut from "@/components/bgLayOut/index";
import chartLayOut from "@/components/Charts/chartLayOut";
import {
  GetDoubleDetailList,
  GetAllStoreByAreaId,
  GetEmployeeList,
  GetDetailList
} from "@/api/rl/index";
export default {
  props: {
    groupPlate: {
      type: String,
      default: () => {
        return [];
      }
    }
  },
  name: "sellAnalysis",
  components: {
    bgLayOut,
    barCharts,
    pieChart,
    lineChart,
    lineChartss,
    chartLayOut
  },
  watch: {
    groupPlate(newValue, oldValue) {
      this.fetchData();
    }
  },
  data() {
    return {
      stockAnalysisOption: {
        title: {
          text: "",
          subtext: ""
        }
      }, // KPI管理指标趋势chartOption
      departmentID: "0", // 部门id
      staffID: "0", // 员工id
      departmentList: [], // 部门列表
      personnelList: [], // 员工列表
      stockAnalysisArr: [], // KPI绩效管理指标概况
      managementIndexArr: [], // KPI绩效管理指标概况(折线)
      performanceTrends: [], // 个人绩效走势
      myOption: {
        showLabel: true,
        grid: { bottom: "20%" },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        }
      },
      managementOption: {
        grid: { bottom: "20%", left: "6%" },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisPointer: {
            show: true,
            value: "2017-07",
            snap: true,
            lineStyle: {
              color: "#2ff0d2",
              opacity: 0.5,
              width: 2
            },
            handle: {
              show: true,
              margin: 40,
              size: 30,
              color: "#2ff0d2"
            }
          }
        },
        tooltip: {
          show: true,
          axisPointer: {
            type: "line"
          }
        },
        hideLineColor: true,
        showSymbol: "none",
        color: ["#F0BF24", "#00D0FE"],
        showLabel: true,
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      myLinesOption: {
        grid: {
          left: "2%",
          right: "2%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    changePieChart(res, params) {
      var obj = {
        title: {
          text: params.data.name,
          subtext: params.data.value
        }
      };
      this.$set(this, "stockAnalysisOption", obj);
    },
    changeManageMentChart(res, params) {
      var dataIndex = params[0].dataIndex;
      var hoverData = res[dataIndex];
      var isNull = false;
      for (var i = 0; i < hoverData.list.length; i++) {
        if (hoverData.list[i].value !== 0) {
          isNull = true;
        }
      }
      if (isNull) {
        this.$set(this, "stockAnalysisArr", hoverData.list);
      } else {
        this.$set(this, "stockAnalysisArr", []);
      }
    },
    // 切换走势图数据事件
    changeChart() {
      this.fetchPerformanceTrends(this.personnelList[this.staffID].id); // 获取走势图数据
    },
    // 获取走势图数据
    async fetchPerformanceTrends(id) {
      try {
        const params = {
          queryType: "10017",
          employeeID: id
        };
        var res = await GetDetailList(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "performanceTrends", result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 选项卡切换
    handleClick() {
      this.$set(this, "staffID", "0");
      this.fetchPersonnelList(this.departmentList[this.departmentID].id); // 获取指定部门人员列表
    },
    // KPI绩效管理指标概况
    async fetchStockAna() {
      try {
        const params = {
          queryType: "10017"
        };
        var res = await GetDoubleDetailList(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "managementIndexArr", result);
          this.$set(this, "stockAnalysisArr", result[10].list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取指定板块部门列表
    async fetchDepartmentList() {
      try {
        const params = {
          groupPlate: this.groupPlate
        };
        var res = await GetAllStoreByAreaId(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "departmentList", result);
          this.fetchPersonnelList(result[0].id); // 获取指定部门人员列表
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取指定部门人员列表
    async fetchPersonnelList(id) {
      try {
        const params = {
          departmentID: id
        };
        var res = await GetEmployeeList(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "personnelList", result);
          this.fetchPerformanceTrends(result[0].id); // 获取走势图数据
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchStockAna(); // KPI绩效管理指标概况
      this.fetchDepartmentList(); // 获取指定板块部门列表
      // this.fetchPersonnelList(); // 获取指定部门人员列表
      // this.fetchPerformanceTrends(); // 获取走势图数据
    }
  }
};
</script>
<style lang="scss">
@import "../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
.office {
  .el-tabs__nav {
    // min-width: 100%;
    // background: red;
  }
  .el-tabs--border-card > .el-tabs__header,
  .el-tabs__content,
  .el-tabs__nav-wrap {
    border-radius: 0px;
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
  .el-tabs__content {
    margin-top: 0px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border-width: 1px !important;
    background: #00d1ff;
  }
  .inlayerTabHead
    .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #000;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    margin: 0px 5px;
    border-radius: 0px;
    border: none;
    color: #2ff0d2;
    background: rgba($color: #00d1ff, $alpha: 0.2);
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
    margin-left: 0px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child {
    margin-right: 0px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #000;
    font-weight: bold;
  }
  .inlayerTabHead .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    color: rgba($color: #000, $alpha: 0.7);
    background: #00d1ff;
  }
  .inlayerTabHead .el-tabs__nav {
    background: #00d1ff;
  }
  .inlayerTabHead
    .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item.is-active {
    position: relative;
    color: #000;
    font-weight: bold;
  }
  .inlayerTabHead
    .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item.is-active:after {
    content: "";
    width: 30%;
    height: 2px;
    position: absolute;
    bottom: 5px;
    left: 35%;
    background: #000;
    display: inline-block;
  }
  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 40px;
    font-size: 30px;
  }
  .el-tabs__nav-prev {
    left: -2px;
  }
  .el-tabs__nav-next {
    right: -2px;
  }
  .el-icon-arrow-left:before {
    width: 44px;
    height: 44px;
  }
  .el-icon-arrow-left:before {
    content: "\E610";
  }
  .el-icon-arrow-right:before {
    content: "\E613";
  }
}
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.rljxViewBox {
  margin: 40px 0px 20px;
  color: #2ff0d2;
  text-align: center;
  @include moduleBg(bg_1813x393);
}
.rljxBottomBox {
  margin-bottom: 40px;
  color: #2ff0d2;
  text-align: center;
  @include moduleBg(bg_1813x792);
}
.top10Scroll {
  overflow-y: scroll;
}
</style>
